
  <template>
  <div class="home">
    <el-container>
      <el-header
        style="
          left: 0px;
          top: 0px;
          width: 100%;
          right: 0;
          z-index: 5;
          margin-top: 0;
        "
      >
        <el-form
          ref="form"
          :model="form"
          rules="rules"
          inline="true"
          label-width="120px"
        >
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              @click="open"
              icon="el-icon-tickets"
              >添加人员</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-upload
              class="upload-demo"
              action
              :on-change="handleChange"
              :on-remove="handleRemove"
              :on-exceed="handleExceed"
              :limit="1"
              :show-file-list="false"
              accept="application/vnd.openxmlformats-    
        officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
              :auto-upload="false"
            >
              <el-button type="primary" size="mini" icon="el-icon-upload2"
                >导入人员</el-button
              >
            </el-upload>
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-tickets"
              @click="confirmData(0)"
              >保存</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(2)"
              >提交</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN == 0">
            <el-button
              type="primary"
              @click="batchdelete()"
              icon="el-icon-delete-solid"
              size="mini"
              >批量作废</el-button
            >
          </el-form-item>

          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(3)"
              >退回上一步</el-button
            >
          </el-form-item>
          <el-form-item v-if="this.StepSN > 0">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-check"
              @click="confirmData(2)"
              >审核</el-button
            >
          </el-form-item>
        </el-form>
      </el-header>

      <el-main style="margin: 3px 10px 10px 10px">
        <span
          style="
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            display: inline-block;
            width: 100%;
            padding: 3px 0 5px 0;
          "
        >
          <span>招聘人员申请表</span>
          <span style="margin-left: 10px">
            <svg-icon v-if="this.form.Status == 0" icon-class="Editing" />
            <svg-icon v-if="this.form.Status == 1" icon-class="ingAudit" />
            <svg-icon v-if="this.form.Status == 2" icon-class="Finish" />
          </span>
        </span>

        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="formStyle"
          inline
          label-width="100px"
        >
          <el-form-item label="单据编号：">{{
            form.RecruitersAppyNo
          }}</el-form-item>
          <el-form-item label="填单人：">{{ form.CreatedByName }}</el-form-item>
          <el-form-item label="创建时间：">{{ form.CreatedOn }}</el-form-item>
        </el-form>

        <el-table
          v-loading="importLoading"
          element-loading-text="加载中"
          :data="formDetail"
          :height="tableHeight"
          style="width: 100%"
          border
          max-height="640"
        >
          <el-table-column align="center" label="编号">
            <template slot-scope="scope">{{
              scope.row.RecruitersAppyNo
            }}</template>
          </el-table-column>

          <el-table-column align="center" label="部门">
            <template slot-scope="scope">{{ scope.row.Organizename }}</template>
          </el-table-column>

          <el-table-column align="center" label="工号">
            <template slot-scope="scope">{{ scope.row.UserCode }}</template>
          </el-table-column>

          <el-table-column align="center" label="姓名">
            <template slot-scope="scope">{{ scope.row.UserName }}</template>
          </el-table-column>

          <el-table-column align="center" label="聘用日期">
            <template slot-scope="scope">{{ scope.row.JoinedDate }}</template>
          </el-table-column>

          <el-table-column align="center" label="离职日期">
            <template slot-scope="scope">{{ scope.row.LeaveDate }}</template>
          </el-table-column>

          <el-table-column align="center" label="职位">
            <template slot-scope="scope">{{ scope.row.JobName }}</template>
          </el-table-column>

          <el-table-column align="center" label="级别">
            <template slot-scope="scope">{{ scope.row.JobLevel }}</template>
          </el-table-column>

          <el-table-column align="center" label="状态">
            <template slot-scope="scope">{{ scope.row.LinStatus }}</template>
          </el-table-column>

          <el-table-column align="center" label="备注">
            <template slot-scope="scope">{{ scope.row.Remark1 }}</template>
          </el-table-column>

          <el-table-column
            align="center"
            fixed="right"
            width="100"
            label="操作"
          >
            <template slot-scope="scope">
              <!-- <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope)" circle></el-button> -->
              <el-button
                type="danger"
                v-show="StepSN == 0"
                icon="el-icon-delete"
                @click="delData(scope, 3)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog
          v-if="dialogFormVisible"
          :visible.sync="dialogFormVisible"
          :title="人员资料"
          customClass="customWidth"
          width="60%"
        >
          <el-form :model="name" label-width="80px" label-position="left">
            <v-AccountOpen
              :ParmType="ParmType"
              @FunAccountAdd="FunAccountAdd"
            ></v-AccountOpen>
          </el-form>
        </el-dialog>
      </el-main>

      <el-main style="margin: 1px 10px">
        <span style="font-size: 20px; font-weight: blod; padding: 10px"
          >工作流：</span
        >

        <el-timeline
          :reverse="true"
          ref="ListLog"
          :model="ListLog"
          style="margin: 10px"
        >
          <el-timeline-item
            v-for="(activity, index) in ListLog"
            :key="index"
            :timestamp="activity.CreateDateTime"
          >
            {{ activity.Remark }}
          </el-timeline-item>
        </el-timeline>
      </el-main>
      <el-dialog :visible.sync="dialogshow" width="700px" top="20px">
        <el-tabs type="border-card">
          <el-tab-pane label="作废名单">
            <el-form :inline="true" label-width="120px" label-position="left">
              <el-form-item>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 20, maxRows: 20 }"
                  placeholder="名单"
                  v-model="deleteData"
                  style="width: 630px"
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  placeholder="作废原因"
                  v-model="deleteReason"
                  style="width: 630px"
                >
                </el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div style="text-align: right">
          <el-button type="danger" @click="canceldelete">取消</el-button>
          <el-button type="primary" @click="deleltAccount">作废</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<style scoped>
.customWidth {
  width: 80%;
  height: 300px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}
.el-table .warning-row {
  background: oldlace;
}

.svg-icon[data-v-c8a70580] {
  width: 2.5em;
  height: 2.5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-bottom: -15px;
}
</style>

<script>
import path from "path";
import { deepClone } from "@/utils";

import { updateForm, DeleteRow } from "@/api/RecruitersForm";
import elementIcons from "../icons/element-icons";
import vAccountOpen from "../Common/AccountOpen";

export default {
  components: {
    vAccountOpen,
  },

  props: {
    inputName: String,
    required: true,
  },
  data() {
    return {
      tableHeight: null,
      importLoading: false,
      dialogshow: false,
      deleteData: "",
      deleteReason: "",
      activeName: "first",
      form: [],
      StepSN: -1,
      ListLog: [],
      reverse: true,
      selectlist: [],

      multipleTable: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      where: "",
      rules: {
        CustomerNo: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created: function () {
    this.DataListData();
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 220 + "px";
    });
  },
  methods: {
    async DataListData() {
      // 提交数据，需要修改

      if (this.inputName == null) {
        this.inputName = this.$route.query.billID;
      }

      const result = await updateForm({
        billID: this.inputName,
        IsPostBack: false,
      });

      this.form = result.data1.Table[0];
      this.selectlist = result.data3.Table;
      this.formDetail = result.data2.Table;
      this.ListLog = result.ListLog;
      this.StepSN = result.StepSN;
      if (this.form.Status == null) {
        this.form.Status = 0;
      }
      // this.selectlist = result.data3.Table;
      // this.Customerlist = result.data4.Table;

      // if (result.code === 20000) {

      // } else {
      //   this.$notify({
      //     title: 'error',

      //     message: result.message,
      //     type: 'error'
      //   })
      // }
    },
    async confirmData(submit) {
      // 提交数据，需要修改

      const Fresult = true;
      if (submit == 2) {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            this.$notify({
              title: "不能提交",
              dangerouslyUseHTMLString: true,
              message: "不可为空，不能提交",
              type: "error",
            });
            Fresult = false;
            return false;
          }
        });
      }

      if (Fresult) {
        const result = await updateForm({
          HeadDate: JSON.stringify(this.form),
          BodyDate: JSON.stringify(this.formDetail),
          billID: this.form.RecruitersAppyNo,
          IsPostBack: true,
          submit: submit,
        });

        this.form = result.data1.Table[0];
        this.formDetail = result.data2.Table;
        this.ListLog = result.ListLog;
        this.StepSN = result.StepSN;
        if (result.code === 20000) {
          //const { description, key, name } = this.EditObj
          this.dialogVisible = false;
          this.$notify({
            title: "保存成功",
            dangerouslyUseHTMLString: true,
            message: "",
            type: "success",
          });
          this.DataListData();
          this.roles = [];
        } else {
          this.$notify({
            title: "保存失败",
            dangerouslyUseHTMLString: true,
            message: "",
            type: "error",
          });
        }
      }
    },
    //editUserInfo(index) {
    //  this.isEditObj[index].a = false;
    //}
    //checkEditUserInfo(index) {      //编辑用户信息
    //  this.isEditObj[index].a = true;
    //},
    //cancelEditUserInfo(index) {
    //  this.isEditObj[index].a = true;
    //}

    // 删除方法
    // 删除选中行
    delData({ $index, row }, typesID) {
      this.$prompt("请填写作废原因：", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async ({ value }) => {
          if (value == "" || value == null) {
            this.$notify({
              title: "作废失败",
              dangerouslyUseHTMLString: true,
              message: "作废原因不能为空。",
              type: "error",
            });
          } else {
            if (typesID == 3) {
              this.formDetail.splice($index, 1);
            }

            if (row.ID == null) {
              return false;
            }

            const result = await DeleteRow({
              ID: row.ID,
              billID: this.inputName,
              types: typesID,
              IsPostBack: false,
              Remark: value,
            });

            this.$message({
              type: "success",
              message: "已作废!",
            });
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    addRow(types) {
      let list = {};

      if (types == 1) {
        this.formDetail.push(list);
      }
    },
    //批量作废
    batchdelete() {
      this.dialogshow = true;
    },
    async deleltAccount() {
      if (
        this.deleteReason == "" ||
        this.deleteReason == null
      ) {
        this.$notify({
          title: "作废失败",
          dangerouslyUseHTMLString: true,
          message: "作废原因不能为空。",
          type: "error",
        });
      } else {
        const result = await DeleteRow({
          billID: this.inputName,
          Remark: this.deleteReason,
          deleteData: this.deleteData,
          deleteType: 2,
          types: 3,
        });
        if (result.code === 20000) {
          this.dialogshow = false;
          this.$notify({
            title: "success",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "success",
          });
          this.DataListData();
        } else {
          this.$notify({
            title: "error",
            dangerouslyUseHTMLString: true,
            message: result.msg,
            type: "error",
          });
        }
      }
    },
    canceldelete() {
      this.dialogshow = false;
      this.deleteData = "";
      this.deleteReason = "";
    },

    select_status(val) {
      this.$forceUpdate();
    },
    open(type) {
      this.ParmType = type; //传入参数
      this.dialogFormVisible = true;
    },
    FunAccountAdd: function (Rows, ParmType) {
      for (let v of Rows) {
        this.multipleTable = v;
        let row = {
          UserCode: this.multipleTable.Account,
          UserName: this.multipleTable.Name,
          JoinedDate: this.multipleTable.EntryDate,
          LeaveDate: this.multipleTable.LeaveDate,
          Organizeid: this.multipleTable.HrOrgCode,
          Organizename: this.multipleTable.OrganizeName,
          JobName: this.multipleTable.JobName,
          Rolelevel: this.multipleTable.Rolelevel,
        };

        this.formDetail.push(row);

        this.dialogFormVisible = false;
      }
    },
    //上传文件时处理方法
    handleChange(file, fileList) {
      this.importLoading = true;
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！",
          });
          this.importLoading = false;
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
        this.importLoading = false;
      }
    },
    //超出最大上传文件数量时的处理方法
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //移除文件的操作方法
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    //上传对数据处理
    importfxx(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据

      this.file = event.currentTarget.files[0];

      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;

      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          //此处引入，用于解析excel
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
          //此处可对数据进行处理
          let arr = [];
          outdata.map((v) => {
            let obj = {};
            obj.Organizename = v["部门"];
            obj.UserCode = v["工号"];
            obj.UserName = v["姓名"];
            obj.JoinedDate = v["聘用日期"];
            obj.LeaveDate = v["离职日期"];
            obj.JobName = v["职位"];
            obj.JobLevel = v["职级"];
            obj.LinStatus = v["状态"];
            arr.push(obj);
          });
          for (let i = 0; i < arr.length; i++) {
            _this.formDetail.push(arr[i]);
          }
          _this.importLoading = false;
          return arr;
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
  },
};
</script>


